import { LikeO, BrowsingHistoryO, EyeO } from '@react-vant/icons';
import style from './index.less'
import { useHistory } from "react-router-dom";
import { GetDateToNewData } from '@/utils';
import React from 'react';
import { Iknowledges } from '@/types'
import { Link } from 'umi';
import Popup from '@/components/Popup'
import { ShareAltOutlined } from '@ant-design/icons';
interface IKnoProps {
    KnowList: Iknowledges[]
}

const Knowledeg: React.FC<IKnoProps> = ({ KnowList = [] }) => {
    // console.log(KnowList);
    return (
        <div className={style.kno}>
            {
                KnowList.length > 0
                    ? KnowList.map((item, index) => {
                        return <ol key={index} className={style.lisbox}>
                            <Link key={item.id} to={`/knowledges/${item.id}`}>
                                <div className={style.tops}>
                                    <li className={style.lis}>
                                        <h2>{item.title}
                                        </h2><span className={style.spans}>|</span>&ensp;
                                        <span className={style.sps}>{GetDateToNewData(new Date(item.publishAt).getTime())}</span>
                                    </li>
                                </div>
                            </Link>
                            <div className={style.box}>
                                <Link key={item.id} to={`/knowledges/${item.id}`}>
                                    <div className={style.imgbox}>
                                        <div className={style.imgSamllBox}>
                                            <img src={item.cover ? item.cover : '暂无图片'} className={style.Imgs} alt="" />
                                        </div>
                                    </div>
                                </Link>
                                <div className={style.article}>
                                    <Link key={item.id} to={`/knowledges/${item.id}`}>
                                        <li className={style.text}>{item.summary}</li>
                                    </Link>
                                    <li className={style.twolis}>
                                        {/* <i>
                                            <LikeO className={style.icons}/>
                                        </i>&ensp;
                                        <span>{item.likes}</span>&ensp;&ensp; */}
                                        <i>
                                            <EyeO fontSize='16px' className={style.iconsviews} />
                                        </i>&ensp;
                                         <span>{item.views}</span>&ensp; · &ensp;
                                         <ShareAltOutlined className={style.icons} />&emsp;
                                        <Popup ProputItem={item}></Popup>
                                    </li>
                                </div>
                            </div>
                        </ol>
                    })
                    : <div>暂无数据</div>
            }
        </div>
    );
};

export default Knowledeg;